<!DOCTYPE html>
<html>
<head>
    <title>SwarmGo Workflow Visualizer</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vis-network@9.1.2/dist/vis-network.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/vis-network@9.1.2/dist/dist/vis-network.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>SwarmGo Workflow Visualizer</h1>
            <div class="controls">
                <button id="exportBtn">Export Diagram</button>
                <button id="clearBtn">Clear History</button>
            </div>
        </div>
        <div class="main-content">
            <div class="workflow-container">
                <h2>Workflow Graph</h2>
                <div id="workflow-graph"></div>
            </div>
            <div class="side-panel">
                <div class="metrics-panel">
                    <h2>Metrics</h2>
                    <div id="metrics-content">
                        <div class="metric">
                            <span>Active Agents:</span>
                            <span id="active-agents">0</span>
                        </div>
                        <div class="metric">
                            <span>Total Steps:</span>
                            <span id="total-steps">0</span>
                        </div>
                        <div class="metric">
                            <span>Cycles Detected:</span>
                            <span id="cycles-detected">0</span>
                        </div>
                    </div>
                </div>
                <div class="history-panel">
                    <h2>Step History</h2>
                    <div id="step-history"></div>
                </div>
            </div>
        </div>
    </div>
    <script src="app.js"></script>
</body>
</html>
